<%@ page import="com.ws.ssmzongjie3.util.Res" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page contentType="text/html;charset=UTF-8" language="java"  isELIgnored="false" %>
<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>顽石旅行网</title>
    <!-- Bootstrap -->
    <link href="${pageContext.request.contextPath}/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/css/common.css">
    <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/css/index.css">
    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
    <![endif]-->
    <style>
    	.topbar{position:relative}
    	.hottel,.haslogin{position:absolute;top:12px;right:50px}
    	.hottel p{cursor:pointer;font-weight:700;float:left;width:100px;border:1px solid orange;text-align:center;height:45px;line-height:45px;margin-right:10px}
    	.hottel a{color:#666;text-decoration:none}
    	.haslogin{top:45px;right:0}
    	.haslogin p{font-weight:700;float:left;margin-right:30px;font-size:18px}

        .friend-links h3 {
            font-size: 18px;
            margin-bottom: 10px;
        }

        .friend-links ul {
            list-style: none;
            padding: 0;
        }

        .friend-links li {
            display: inline-block;
            margin: 0 10px;
        }

        .friend-links a {
            color: #007bff;
            text-decoration: none;
        }

        .friend-links a:hover {
            text-decoration: underline;
        }
        .col-md-3 {
                                    width: 25%; /* 固定宽度 */
                                    height: 300px; /* 固定高度 */
                                    display: flex;
                                    flex-direction: column;
                                    align-items: stretch; /* 水平拉伸 */
                                    justify-content: space-between; /* 垂直分布 */
                                    border: 1px solid #ddd; /* 可选：添加边框 */
                                    box-sizing: border-box; /* 确保边框不增加宽度 */
                                }
                                .col-md-3 a {
                                    display: flex;
                                    flex-direction: column;
                                    width: 100%; /* 链接占满父容器 */
                                    height: 100%; /* 链接占满父容器 */
                                    text-decoration: none; /* 去除链接下划线 */
                                }
                                .col-md-3 img {
                                    width: 100%; /* 图片宽度占满父容器 */
                                    height: 60%; /* 图片高度占60% */
                                    object-fit: cover; /* 保持图片比例 */
                                }
                                .col-md-3 .has_border {
                                    width: 100%; /* 内容宽度占满父容器 */
                                    height: 40%; /* 内容高度占40% */
                                    display: flex;
                                    flex-direction: column;
                                    justify-content: center; /* 内容垂直居中 */
                                    text-align: center; /* 文字居中 */
                                }
    </style>
</head>
<body>
	<!--引入头部-->
    <!-- 头部 start -->
    <header id="header">

        <div class="header_wrap">
            <div class="topbar">
                <div class="logo">
                    <a href="/"><img src="${pageContext.request.contextPath}/images/logo.png" style="height: 60px;" alt=""></a>
                </div>
                <form class="search" action="${pageContext.request.contextPath}/luyou/sousuo">
                        <input name="route_name" type="text" placeholder="请输入路线名称" class="search_input" autocomplete="off">
                        <input type="submit" value="搜索" class="search-button">
                </form>
                <c:choose>
                    <c:when test="${empty user}">
                        <div class="hottel">
                            <a href="${pageContext.request.contextPath}/luyou/login"><p>登录</p></a>
                            <a href="${pageContext.request.contextPath}/luyou/zhuce"><p>注册</p></a>
                        </div>
                    </c:when>
                    <c:otherwise>
                        <div class="haslogin">
                            <p>欢迎：<a href="${pageContext.request.contextPath}/user/gerenzhongxin">${user.u_name}</a></p>
                            <p><a href="${pageContext.request.contextPath}/user/tuichu">退出登录</a></p>
                        </div>
                    </c:otherwise>
                </c:choose>
            </div>
        </div>
    </header>
    <!-- 头部 end -->
    <!-- 首页导航 -->
    <div class="navitem">
        <ul class="nav">
            <li class="nav-active"><a href="${pageContext.request.contextPath}/luyou/shouye">首页</a></li>
            <c:forEach items="${columns}" var="item">
            	<li><a href="${pageContext.request.contextPath}/luyou/sousuo?column_id=${item.column_id}">${item.column_name}</a></li>
            </c:forEach>
            <li><a href="${pageContext.request.contextPath}/collection/paihang">收藏排行榜</a></li>
        </ul>
    </div>

    <!-- banner start-->
    <section id="banner">
        <div id="carousel-example-generic" class="carousel slide" data-ride="carousel" data-interval="2000">
            <!-- Indicators -->
            <ol class="carousel-indicators">
                <c:forEach items="${routes}" begin="0" end="${routes.size()}" var="item">
                    <c:if test="${item.carousel == 0 and item.is_delete == 0}">
                		<li data-target="#carousel-example-generic" data-slide-to="${item}"></li>
                    </c:if>
                	</c:forEach>
            </ol>
            <!-- Wrapper for slides -->

            <div class="carousel-inner" role="listbox">
                <c:set var="firstActiveAdded" value="false" scope="page" />
                <c:forEach items="${routes}" var="item" varStatus="status">
                    <c:if test="${item.carousel == 0 and item.is_delete == 0}">
                        <div class="item ${not firstActiveAdded ? 'active' : ''}" style="height: 300px">
                            <a href="${pageContext.request.contextPath}/luyou/xiangqing?route_id=${item.carousels.associated_lines}">
                                <img src="<%=Res.fileUrl%>${item.carousels.picture_address}" alt="轮播图">
                                <!-- 图片标题 -->
                                <div class="carousel-caption">
                                    <h3>${item.carousels.carousel_title}</h3>
                                </div>
                            </a>
                        </div>
                        <c:set var="firstActiveAdded" value="true" scope="page" />
                    </c:if>
                </c:forEach>
            </div>
            <!-- Controls -->
            <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
			    <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
			    <span class="sr-only">Previous</span>
			  </a>
            <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
			    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
			    <span class="sr-only">Next</span>
			  </a>
        </div>
    </section>
    <!-- banner end-->
    <!-- 旅游 start-->
    <section id="content">
         <!-- 顽石精选start-->
        <section class="jx">
            <div class="jx_top">
                <div class="jx_tit">
                    <img src="images/icon_5.jpg" alt="">
                    <span>顽石精选</span>
                </div>
                <!-- Nav tabs -->

            </div>
            <div class="jx_content">
                <!-- Tab panes -->
                <div class="tab-content">
                    <div role="tabpanel" class="tab-pane active" id="popularity1">
                        <div class="row">


                            <c:set var="count" value="0" scope="page" />
                            <c:forEach items="${routes}" var="item">
                                <c:if test="${item.recommend == 0 and count < 4 and item.is_delete == 0}">
                                    <div class="col-md-3" >
                                        <a href="${pageContext.request.contextPath}/luyou/xiangqing?route_id=${item.route_id}">
                                            <img src="<%=Res.fileUrl%>${item.route_photo}" alt="${item.route_name}" onerror="this.onerror=null; this.src='${pageContext.request.contextPath}/images/404.png';">

                                            <div class="has_border">
                                                <h3>${item.route_name}</h3>
                                                <div class="price">网付价<em>￥</em><strong>${item.route_price}</strong><em>起</em></div>
                                            </div>
                                        </a>
                                    </div>
                                    <c:set var="count" value="${count + 1}" scope="page" />
                                </c:if>
                            </c:forEach>

                        </div>

                    </div>


                </div>
            </div>
        </section>
        <!-- 顽石精选end-->
        <!-- 国内游 start-->
        <section class="jx">
            <div class="jx_top">
                <div class="jx_tit">
                    <img src="${pageContext.request.contextPath}/images/icon_6.jpg" alt="">
                    <span>国内游</span>
                </div>
                <!-- Nav tabs -->

            </div>
            <div class="jx_content">
                <!-- Tab panes -->
                <div class="tab-content">
                    <div role="tabpanel" class="tab-pane active" id="popularity2">
                        <div class="row">
                            <c:set var="count" value="0" scope="page" />
                            <c:forEach items="${routes}" var="item">
                                <c:if test="${item.columns.column_name.equals('国内游') and count < 4 and item.is_delete == 0}">
                                    <div class="col-md-3">
                                        <a href="${pageContext.request.contextPath}/luyou/xiangqing?route_id=${item.route_id}">
                                            <img src="<%=Res.fileUrl%>${item.route_photo}" alt="" onerror="this.onerror=null; this.src='${pageContext.request.contextPath}/images/404.png';">
                                            <div class="has_border">
                                                <h3>${item.route_name}</h3>
                                                <div class="price">网付价<em>￥</em><strong>${item.route_price}</strong><em>起</em></div>
                                            </div>
                                        </a>
                                    </div>
                                    <c:set var="count" value="${count + 1}" scope="page" />
                                </c:if>
                            </c:forEach>

                        </div>
                    </div>
                </div>
            </div>
        </section>

        <!-- 国内游 end-->
        <!-- 境外游 start-->
        <section class="jx">
            <div class="jx_top">
                <div class="jx_tit">
                    <img src="${pageContext.request.contextPath}/images/icon_7.jpg" alt="">
                    <span>境外游</span>
                </div>
                <!-- Nav tabs -->
<%--                <ul class="jx_tabs" role="tablist">--%>
<%--                    <li role="presentation" class="active">--%>
<%--                        <span>--%>
<%--                                                    <a href="route_detail.jsp" aria-controls="popularity" role="tab" data-toggle="tab">人气旅游</a>--%>

<%--                        </span>--%>
<%--                    </li>--%>
<%--                    <li role="presentation">--%>
<%--                        <span>--%>
<%--                                                    <a href="route_detail.jsp" aria-controls="newest" role="tab" data-toggle="tab">最新旅游</a>--%>

<%--                        </span>--%>
<%--                    </li>--%>
<%--                    <li role="presentation">--%>
<%--                        <span>--%>
<%--                                                    <a href="route_detail.jsp" aria-controls="theme" role="tab" data-toggle="tab">主题旅游</a>--%>

<%--                        </span>--%>
<%--                    </li>--%>
<%--                </ul>--%>
            </div>
            <div class="jx_content">
                <!-- Tab panes -->
                <div class="tab-content">
                    <div role="tabpanel" class="tab-pane active" id="popularity3">
                        <div class="row">
                            <c:set var="count" value="0" scope="page" />
                            <c:forEach items="${routes}" var="item">
                                <c:if test="${item.columns.column_name.equals('境外游') and count < 4 and item.is_delete == 0}">
                                    <div class="col-md-3">
                                        <a href="${pageContext.request.contextPath}/luyou/xiangqing?route_id=${item.route_id}">
                                            <img src="<%=Res.fileUrl%>${item.route_photo}" alt="" onerror="this.onerror=null; this.src='${pageContext.request.contextPath}/images/404.png';">
                                            <div class="has_border">
                                                <h3>${item.route_name}</h3>
                                                <div class="price">网付价<em>￥</em><strong>${item.route_price}</strong><em>起</em></div>
                                            </div>
                                        </a>
                                    </div>
                                    <c:set var="count" value="${count + 1}" scope="page" />
                                </c:if>
                            </c:forEach>

                        </div>
                    </div>
                </div>
            </div>
        </section>
        <!-- 境外游 end-->
    </section>
    <!-- 旅游 end-->
    <!--导入底部-->
    <!-- 尾部 start-->


    <footer id="footer">
        <div class="friend-links">
            <c:forEach items="${links}" var="item">
                <a href="${item.links_url}" class="link-item">${item.links_name}</a>
            </c:forEach>
        </div>
        <div class="company">
            <p>顽石教育有限公司 版权所有Copyright 2019-2020, All Rights Reserved 京ICP备12390</p>
        </div>
    </footer>
    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <style>
    .friend-links {
        padding: 15px 0;
        text-align: center;
        background-color: #f8f9fa; /* 浅灰色背景 */
    }

    .link-item {
        display: inline-block;
        margin: 0 10px; /* 链接之间的间隔 */
        color: #007bff; /* 链接颜色 */
        text-decoration: none;
        font-size: 14px;
    }

    .link-item:hover {
        text-decoration: underline; /* 鼠标悬停时显示下划线 */
    }
    </style>
    <script src="${pageContext.request.contextPath}/js/jquery-3.3.1.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="${pageContext.request.contextPath}/js/bootstrap.min.js"></script>
    <!--导入布局js，共享header和footer-->
    <script type="text/javascript" src="${pageContext.request.contextPath}/js/include.js"></script>
</body>
</html>